<script setup lang="ts">
  import { ref } from 'vue'
  import type { BannerItem } from '@/types/home'

  const activeIndex = ref(0)

  // 当 swiper 下标发生变化时触发
  // const onChange = (ev: any) => {
  //   activeIndex.value = ev.detail.current
  // }
  const onChange : UniHelper.SwiperOnChange = (ev) => {
    // ! 非空断言，主观上排除掉空值情况
    activeIndex.value = ev.detail.current
  }

  // 定义 props 接收
  defineProps<{
    list : BannerItem[]
  }>()
</script>
<template>
  <view class="carousel">
    <swiper :circular="true" :autoplay="true" :interval="3000" @change="onChange">

      <swiper-item v-for="item in list" :key="item.id">
        <navigator url="/pages/index/index" hover-class="none" class="navigator">
          <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
        </navigator>
      </swiper-item>

    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text v-for="(item, index) in list" :key="item.id" class="dot" :class="{ active: index === activeIndex }">
      </text>
    </view>
  </view>
</template>

<style lang="scss">
  :host {
    display: block;
    height: 280rpx;
  }

  // /* 轮播图 */
  .carousel {
    // height: 100%;
    height: 280rpx;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    background-color: #efefef;

    .indicator {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 16rpx;
      display: flex;
      justify-content: center;

      .dot {
        width: 30rpx;
        height: 6rpx;
        margin: 0 8rpx;
        border-radius: 6rpx;
        background-color: rgba(255, 255, 255, 0.4);
      }

      .active {
        background-color: #fff;
      }
    }

    .navigator,
    .image {
      width: 100%;
      height: 100%;
      /* 控制图片的缩放方式 */
    }


  }
</style>
